<template>
    <div class="user-manage">
       <div class="user-search">
        <el-form :inline="true" :model="searchBody" class="demo-form-inline">
          <div style="width: 50% ;display: flex;margin: 10px 0">
    <el-input v-model="searchBody.content" style="margin-right: 10px" placeholder="请输入用户账户" />
    <el-button type="warning" @click="queryUser()">查询</el-button>
          </div>
        </el-form>
       </div>
      <div class="table-container">

      <el-table
                :data="userInfo"
                sytle="width: 100%"
                class="leave-word-table"
            >
            <el-table-column>
      </el-table-column>
                <el-table-column
                    fixed
                    prop="id"
                    align="center"
                    label="用户ID"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="userNickName"
                    align="center"
                    label="用户昵称"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="userName"
                    align="center"
                    label="用户名"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="gender"
                    align="center"
                    label="性别"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="institute"
                    align="center"
                    label="学院"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="speciality"
                    align="center"
                    label="专业"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="classNumber"
                    align="center"
                    label="班级"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="userAccount"
                    align="center"
                    label="用户账户"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="userPassword"
                    align="center"
                    label="用户密码"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="role"
                    label="用户角色"
                    align="center"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="phoneNumber"
                    label="用户电话号码"
                    align="center"
                    width="150">
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                    label="操作"
                      align="center"
                    width="150">
                      <template slot-scope="scope">
                        <el-button @click="handleDelte(scope.row)" type="text" size="small" style="color: #d61a1a">删除</el-button>
                        <el-button @click="handleCheck(scope.row)" type="text" size="small" style="color: #589e49">提升为管理员</el-button>
                      </template>
<!--                    <template slot-scope="scope">-->
<!--                      <el-button type="danger" icon="el-icon-delete" circle @click="handleDelte(scope.row)"></el-button>-->
<!--                      <el-button @click="handleCheck(scope.row)" type="text" size="small">提升为管理员</el-button>-->
<!--                    </template>-->
                    </el-table-column>
            </el-table>
      </div>
            <div class="leave-word-info-page-button">
                <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="total,prev, pager, next, jumper"
                :total="totalR">
                </el-pagination>
            </div>
    </div>
    </template>
<script>
export default{
    name: 'UserManage',
    data(){
        return{
            totalR:'',
            pageSize:10,
            currentPage: 1,
            res:{
                message:'',
                code:'',
                data:''
            },
            resR:{
                message:'',
                code:'',
                data:''
            },
            searchBody:{
                content:'',
            },
            userInfo:[
                {
                    id:'',
                    userNickName:'',
                    userName:'',
                    userAccount:'',
                    userPassword:'',
                    gender:'',
                    institute:'',
                    speciality:'',
                    classNumber:'',
                    role:'',
                    phoneNumber:''
                }
            ],
        }
    },
    created(){
        this.queryUserCount();
        this.queryUserList();
    },
    methods:{
        handleCurrentChange(val) {
        this.currentPage = val;
        this.queryUserList();
      },
        queryUserList(){
            this.$axios.get('/user/getUserList/'+this.currentPage+"/"+this.pageSize).then((response)=>{
                this.res = response.data;
                this.userInfo = this.res.data;
                for(var i = 0;i < this.res.data.length;i++){
                    this.userInfo[i].id = this.res.data[i].id;
                    this.userInfo[i].userNickName = this.res.data[i].userNickName;
                    this.userInfo[i].userName = this.res.data[i].userName;
                    this.userInfo[i].userAccount = this.res.data[i].userAccount;
                    this.userInfo[i].userPassword = this.res.data[i].userPassword;
                    this.userInfo[i].gender = this.res.data[i].gender;
                    this.userInfo[i].institute = this.res.data[i].institute;
                    this.userInfo[i].speciality = this.res.data[i].speciality;
                    this.userInfo[i].classNumber = this.res.data[i].classNumber;
                    this.userInfo[i].role = this.res.data[i].role;
                    this.userInfo[i].phoneNumber = this.res.data[i].phoneNumber;
                }
            }).catch((response)=>{
                console.log(response);
            })
        },
        queryUserCount(){
            this.$axios.get("/user/count").then((response)=>{
                this.resR = response.data;
                this.totalR = this.resR.data;
            }).catch((response)=>{
                console.log(response);
            })
        },
        queryUser(){
            this.$axios.post("/user/query",JSON.stringify(this.searchBody)).then((response)=>{
                this.res = response.data;
                this.userInfo = this.res.data;
                for(var i = 0;i < this.res.data.length;i++){
                    this.userInfo[i].id = this.res.data[i].id;
                    this.userInfo[i].userNickName = this.res.data[i].userNickName;
                    this.userInfo[i].userName = this.res.data[i].userName;
                    this.userInfo[i].userAccount = this.res.data[i].userAccount;
                    this.userInfo[i].userPassword = this.res.data[i].userPassword;
                    this.userInfo[i].gender = this.res.data[i].gender;
                    this.userInfo[i].institute = this.res.data[i].institute;
                    this.userInfo[i].speciality = this.res.data[i].speciality;
                    this.userInfo[i].classNumber = this.res.data[i].classNumber;
                    this.userInfo[i].role = this.res.data[i].role;
                    this.userInfo[i].phoneNumber = this.res.data[i].phoneNumber;
                }
            }).catch((response)=>{
                console.log(response);
            })
        },
        handleDelte(row){
            this.$axios.delete("/user/delete/"+row.id).then((response)=>{
                this.res = response.data;
                if(this.res.code == '200'){
                    this.$message.success("删除成功");
                    this.queryUserList();
                }else{
                    this.$message.success("删除失败");
                }
            }).catch((response)=>{
                console.log(response);
            })
        },
        handleCheck(row){
            this.$axios.put("/user/check/"+row.id).then((response)=>{
                this.res = response.data;
                if(this.res.code == '200'){
                    this.$message.success("已审核");
                    this.queryUserList();
                }else{
                    this.$message.error("审核失败");
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.user-manage{
    width: 100%;
    height: 100%;
}
.user-search{
    margin-left: 415px;
}

.table-container {
  width: 100%; /* 设置表格容器的宽度，根据实际情况调整 */
  overflow-x: auto; /* 启用横向滚动条 */
}
</style>
